<html lang="en-US">

<head>
    
<title>基于hugo搭建个人博客 - 花落雨忧</title>

<meta property="og:title" content="基于hugo搭建个人博客 - 花落雨忧">



    



    
    <meta property="description" content="背景：做一个线上的笔记本，基于md语法，结合hugo，静态编译成个人博客
[&amp;hellip;] linux系统下，使用yum安装
yum -y install hugo
安装完成后，可以全局使用hugo命令
hugo version
创建个人网站
hugo new site myblog
进入创建的myblog目录，可以看到生成的目录结构是这样的:
├── archetypes│ └── &amp;hellip;">
    <meta property="og:description" content="背景：做一个线上的笔记本，基于md语法，结合hugo，静态编译成个人博客
[&amp;hellip;] linux系统下，使用yum安装
yum -y install hugo
安装完成后，可以全局使用hugo命令
hugo version
创建个人网站
hugo new site myblog
进入创建的myblog目录，可以看到生成的目录结构是这样的:
├── archetypes│ └── &amp;hellip;">
    






<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="shortcut icon" href="https://www.lican.asia/logo/logo.png" type="image/x-icon" />



<link rel="stylesheet" href="/css/style.min.css" />

<link rel="stylesheet" href="/css/reset.min.css" />




<script src="https://www.lican.asia/js/highlight.min.js"></script>

<script>
hljs.configure({ ignoreUnescapedHTML: true })
hljs.highlightAll();
</script>


<script src="https://www.lican.asia/js/jquery.min.js"></script>




<link href="https://www.lican.asia/css/hugo-code.min.css" rel="stylesheet" />



    <style>
        .post-content img {
            max-width: 400px;
        }
    </style>
</head>

<body id="period" class="home blog">
    <a class="skip-content" href="#main">Press "Enter" to skip to content</a>
    <div id="overflow-container" class="overflow-container">
        <header class="site-header" id="site-header" role="banner">
    <div class="max-width">
        <div id="title-container" class="title-container">
            <div id="site-title" class="site-title"><a href="/">花落雨忧</a></div>
            <p class="tagline">思所及 力所行 方为真.</p>
        </div>
        
        <div id="menu-primary-container" class="menu-primary-container">
            <div class="icon-container">
            </div>
            <div id="menu-primary" class="menu-container menu-primary" role="navigation">
                <nav class="menu">
                    <ul id="menu-primary-items" class="menu-primary-items">
                        
                        
                        <li id="menu-item-0"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/posts" aria-current="page" tabindex="0">首页</a></li>
                        
                        <li id="menu-item-1"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/tech/" aria-current="page" tabindex="1">技术文档</a></li>
                        
                        <li id="menu-item-2"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/article/" aria-current="page" tabindex="2">文章</a></li>
                        
                        <li id="menu-item-3"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/project/" aria-current="page" tabindex="3">项目</a></li>
                        
                        <li id="menu-item-4"
                            class="menu-item menu-item-type-custom menu-item-object-custom ">
                            <a href="/about/" aria-current="page" tabindex="4">关于</a></li>
                        
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

        <div id="primary-container" class="primary-container">
            <div class="max-width">
                <section id="main" class="main" role="main">
                    <div id="loop-container" class="loop-container">
                        <div
                            class="post type-post status-publish format-standard hentry entry">
                            <article>
                                <div class="post-container">
                                    <div class="post-header">
                                        <h2 class="post-title">
                                            <a href="/tech/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">基于hugo搭建个人博客</a>
                                        </h2>
                                        
                                    </div>
                                    <div class="post-content">
                                        <p>背景：做一个线上的笔记本，基于md语法，结合hugo，静态编译成个人博客</p>
<h4 id="安装hugo">安装hugo</h4>
<p>linux系统下，使用yum安装</p>
<p><code>yum -y install hugo</code></p>
<p>安装完成后，可以全局使用hugo命令</p>
<p><code> hugo version</code></p>
<p>创建个人网站</p>
<p><code> hugo new site myblog</code></p>
<p>进入创建的myblog目录，可以看到生成的目录结构是这样的:</p>
<p><code>├── archetypes │   └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes</code></p>
<h4 id="选择一个主体">选择一个主体</h4>
<p>创建完网站之后，我们可以在Hugo官方的<!-- raw HTML omitted -->主体商店<!-- raw HTML omitted -->选择一个自己喜欢的主题，并下载下来使用</p>
<p>这里以hugo-notepadiem这个主题为例，进入上一步创建的个人网站，并克隆主题到themes文件夹</p>
<p><code> git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium</code></p>
<p><code>. ├── archetypes │   └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes └── hugo-notepadium</code></p>
<h4 id="修改网站配置">修改网站配置</h4>
<p>修改站点配置文件config.toml，填写自己的网站信息和使用的主题名称，也可以根据主题说明里示例的配置信息来自定义网站内容</p>
<p><code>baseURL = &quot;https://example.com&quot; title = &quot;MyBlog&quot; theme = &quot;hugo-notepadium&quot; copyright = &quot;©2020 my name.&quot;</code></p>
<h4 id="创建文章">创建文章</h4>
<p>接下来我们可以开始写文章了，通过：</p>
<p><code>hugo new posts/helloworld.md</code></p>
<p>新建一篇文章，在生成的文件中使用markdown格式来书写文章内容</p>
<p>`&mdash;
title: &ldquo;Helloworld&rdquo;
date: 2020-04-19T23:56:47+08:00</p>
<h4 id="网站预览">网站预览</h4>
<p>执行server 命令，对所有已发布和编辑中的文章进行预览：</p>
<p><code>hugo server -D </code></p>
<h4 id="发布内容">发布内容</h4>
<p>写完文章后，预览没问题后，可以更改文章的草稿状态draft: false,然后编译生成静态网站内容了：</p>
<p><code>hugo -t hugo-notepadium</code></p>
<p>可以看到，几乎瞬间完成编译工作，生成的静态内容都在public目录下面：</p>
<p><code>public ├── 404.html ├── categories ├── css ├── index.html ├── index.xml ├── page ├── posts ├── sitemap.xml └── tags</code></p>
<h4 id="部署到线上">部署到线上</h4>
<p>最简单的部署方式，只需要把public目录下的内容复制到nginx转发的目录，通过nginx来访问，还可以绑定域名，也可以自己写一个shell脚本，做到每次编译完文章后自动同步public目录下的内容到nginx对应的目录，来保持线上站点的内容及时更新</p>


                                        
                                    </div>

                                    

                                    

                                    
                                    
                                    

                                </div>
                            </article>
                        </div>
                    </div>
                </section>
                <aside class="sidebar sidebar-primary" id="sidebar-primary" role="complementary">
    <h1 class="screen-reader-text">Sidebar</h1>
    

    
    
    <section id="text-2" class="widget widget_text">
        <div class="textwidget">
            
            <div id="profile">
                <div id="profile_picture"><img src="https://www.lican.asia/logo/logo.png"></div>
                <div id="profile_intro">
                    <p><span class="name">Lican</span></p>
                    <p class="intro">全栈开发者，爱好造轮子。</p>
                </div>
            </div>
            
            <p>
                <script type="text/javascript">
                    (function ($) {
                        $(document).ready(function () {
                            var menuPrimaryContainer = $('#menu-primary-container');
                            var profile = $('#text-2');
                            $('#toggle-navigation').click(function () {
                                if (menuPrimaryContainer.hasClass('open')) {
                                    profile.removeClass('open');
                                } else {
                                    profile.addClass('open');
                                }
                            });
                        });
                    })(jQuery);
                </script>
            </p>
        </div>
    </section>
    
    
    
    
    
    <section id="text-5" class="widget widget_text">
        <h2 class="widget-title">开源项目</h2>
        <div class="textwidget">
            <div id="projects" style="line-height: 22px;">
                
                <a href="https://github.com/idoubi/gonews"
                    target="_blank">gonews</a>: &nbsp;Daily news for golang<br>
                
                <a href="https://github.com/idoubi/sql2struct"
                    target="_blank">sql2struct</a>: &nbsp;Generate go struct according to SQL<br>
                
                <a href="https://github.com/idoubi/goz"
                    target="_blank">goz</a>: &nbsp;Request library used in golang<br>
                
        </div>
    </section>
    
    

    
    
    
    
    <section id="qrcode" class="widget widget_media_image">
        <h2 class="widget-title">微信公众号</h2>
        <img width="258" height="258"
            src="https://www.lican.asia/wechat/lican.png"
            class="image wp-image-5514  attachment-full size-full" alt=""
            style="max-width: 100%; height: auto;"
            sizes="(max-width: 258px) 100vw, 258px">
    </section>
    
    

    
    
    

    
    
    

    
    
    
    
</aside>
            </div>
        </div>

        <footer id="site-footer" class="site-footer" role="contentinfo">
    <div class="max-width">
    </div>
    <div class="footer">
        <div id="footercontent">
            © lican.asia All rights reserved<br/>
            Built with Hugo Theme <a href="https://github.com/idoubi/hugo-theme-period" target="_blank">Period</a>
        </div>
    </div>
</footer>

<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?e8351b6d4626d5881d439ea1f6184baa";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
    
    
    </div>
    
</body>

</html>